<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
        }

        .a {
            width: 1000px;
            height: 100px;
            background-color: #eee;
            margin: auto;
        }

        .a1 {
            width: 154px;
            height: 52px;
            float: left;
            background-color: #f00;
            margin-top: 21px;
            margin-left: 20px;
        }

        /* 后代选择器  --- 子孙后代 */
        .a1 img {
            width: 154px;
            height: 52px;
        }

        .a2 {
            width: 228px;
            height: 26px;
            float: right;
            background-color: #ddd;
            margin-top: 40px;
            margin-right: 18px;

            color: red;
            text-align: center;
            line-height: 26px;
        }

        .b {
            width: 1000px;
            height: 58px;
            margin: auto;
            background-color: #333;

            color: #fff;
            line-height: 58px;
            text-align: center;
        }

        .b1 {
            width: 119px;
            height: 58px;
            float: left;
            margin-left: 30px;

            /* color: #fff;
            line-height: 58px;
            text-align: center; */
        }

        .b2 {
            width: 119px;
            height: 58px;
            float: left;

            /* color: #fff;
            line-height: 58px;
            text-align: center; */
        }

        .c {
            width: 1000px;
            height: 240px;
            background-color: #eee;
            margin: auto;
        }

        .c1 {
            width: 500px;
            height: 240px;
            float: left;
            background-color: pink;
        }

        .c h3 {
            /* width: 500px; */
            height: 63px;
            /* background-color: #ddd; */
            margin-top: 13px;

            color: #333;
            font-size: 18px;
            line-height: 63px;
            margin-left: 22px;
        }

        .c p {
            height: 24px;
            /* background-color: #ff0; */
            margin-left: 33px;
            float: left;

            color: #666;
            font-size: 12px;
            line-height: 24px;
        }

        .c1 p span {
            float: right;
            margin-right: 30px;
            color: #999;
        }





        .c2 {
            width: 240px;
            height: 240px;
            float: left;
            background-color: bisque;
        }

        .c2-p {
            /* important 重要的    提升权重 */
            color: red !important;
            margin-right: 22px;
            margin-top: 15px;
        }

        .c3 {
            width: 260px;
            height: 240px;
            float: left;
            background-color: pink;
        }


        .d {
            width: 1000px;
            height: 250px;
            background-color: #ddd;
            margin: auto;
        }

        .d1 {
            width: 502px;
            height: 250px;
            /* background-color: #f00; */
            float: left;
        }

        .d h3 {
            /* 不写宽度 */
            height: 38px;
            margin-top: 20px;
            /* background-color: aqua; */
            margin-left: 30px;
            line-height: 38px;
            font-size: 18px;
        }

        .d hr {
            margin-left: 20px;
            margin-right: 30px;
            margin-bottom: 16px;
        }

        .d3 hr {
            margin-right: 20px;
        }

        .d1-2 {
            /* height: 190px; */
            background-color: cadetblue;
            margin-left: 25px;
        }


        .d1-2-1 {
            width: 152px;
            float: left;
            /* height: 190px; */
        }

        .d1-2-2 {
            width: 193px;
            float: left;
            /* height: 190px; */
        }

        .d1-2-3 {
            width: 132px;
            float: left;
            /* height: 190px; */
        }

        .d p {
            color: #666;
            line-height: 24px;
            font-size: 12px;
        }

        .d2 {
            width: 200px;
            height: 250px;
            background-color: #ff0;
            float: left;
        }

        .d2 p {
            margin-left: 20px;
        }

        .d3 {
            width: 298px;
            height: 250px;
            background-color: #f00;
            float: left;
        }
    </style>
</head>

<body>

    <div class="a">
        <h1 class="a1">
            <img src="../images/7.jpg" alt="">
        </h1>
        <div class="a2">欢迎来到我的网站</div>
    </div>



    <div class="b">
        <div class="b1">一只猪</div>
        <div class="b2">两只猪</div>
        <div class="b2">两只猪</div>
        <div class="b2">两只猪</div>
        <div class="b2">两只猪</div>
        <div class="b2">两只猪</div>
        <div class="b2">两只猪</div>
        <div class="b2">两只猪</div>
    </div>


    <div class="c">
        <div class="c1">
            <h3>公司新闻</h3>
            <p>啊啊啊啊啊啊啊啊啊啊啊 <span>2022-12-12</span></p>
            <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊 <span>2022-12-12</span></p>
            <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊 <span>2022-12-12</span></p>
            <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊 <span>2022-12-12</span></p>
            <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊 <span>2022-12-12</span></p>
            <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊 <span>2022-12-12</span></p>
        </div>
        <div class="c2">
            <h3>公司新闻</h3>
            <p>啊啊啊啊啊啊啊啊啊啊啊</p>
            <p>啊啊啊啊啊啊啊啊啊啊啊</p>
            <p class="c2-p">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
        </div>
        <div class="c3">
            <h3>公司新闻</h3>
        </div>
    </div>


    <div class="d">
        <div class="d1">
            <h3>产品中心</h3>
            <hr>
            <div class="d1-2">
                <div class="d1-2-1">
                    <p>&gt; &nbsp;&nbsp;什么电机</p>
                    <p>&gt; &nbsp;&nbsp;什么电机</p>
                    <p>&gt; &nbsp;&nbsp;什么电机</p>
                    <p>&gt; &nbsp;&nbsp;什么电机</p>
                    <p>&gt; &nbsp;&nbsp;什么电机</p>
                    <p>&gt; &nbsp;&nbsp;什么电机</p>
                </div>
                <div class="d1-2-2">
                    <p>&gt; &nbsp;&nbsp;什么电机</p>
                    <p>&gt; &nbsp;&nbsp;什么电机</p>
                    <p>&gt; &nbsp;&nbsp;什么电机</p>
                    <p>&gt; &nbsp;&nbsp;什么电机</p>
                    <p>&gt; &nbsp;&nbsp;什么电机</p>
                </div>
                <div class="d1-2-3">
                    <p>&gt; &nbsp;&nbsp;什么电机</p>
                    <p>&gt; &nbsp;&nbsp;什么电机</p>
                    <p>&gt; &nbsp;&nbsp;什么电机</p>
                    <p>&gt; &nbsp;&nbsp;什么电机</p>
                </div>
            </div>
        </div>
        <div class="d2">
            <h3>产品中心</h3>
            <hr>
            <div class="d1-2-2">
                <p>&gt; &nbsp;&nbsp;什么电机</p>
                <p>&gt; &nbsp;&nbsp;什么电机</p>
                <p>&gt; &nbsp;&nbsp;什么电机</p>
                <p>&gt; &nbsp;&nbsp;什么电机</p>
                <p>&gt; &nbsp;&nbsp;什么电机</p>
            </div>
        </div>
        <div class="d3">
            <h3>产品中心</h3>
            <hr>
        </div>
    </div>


</body>

</html>